<template>
  <div class="">
    <a-card title="基本信息" style="width: 100%" v-if="nurse">
      <a-descriptions :column="3">
        <a-descriptions-item label="机构编码">{{
          nurse.id
        }}</a-descriptions-item>
        <a-descriptions-item label="状态" style="color: #f60 !important">{{
          ["审核中", "已通过", "已拒绝", "已撤销"][nurse.status]
        }}</a-descriptions-item>

        <a-descriptions-item label="服务名称">{{
          nurse.name
        }}</a-descriptions-item>
        <a-descriptions-item label="机构地址">{{
          nurse.address
        }}</a-descriptions-item>
        <a-descriptions-item label="负责人">{{
          nurse.chargePerson
        }}</a-descriptions-item>

        <a-descriptions-item label="联系方式">{{
          nurse.mobile
        }}</a-descriptions-item>
        <a-descriptions-item label="服务时间"
          >{{ nurse.serviceBeginTime }} -{{
            nurse.serviceEndTime
          }}</a-descriptions-item
        >
        <a-descriptions-item label="提交时间">{{
          nurse.createdAt
        }}</a-descriptions-item>
        <a-descriptions-item label="机构简介">{{
          nurse.detail
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card title="资质信息" style="width: 100%">
      <a-descriptions :column="2">
        <a-descriptions-item label="机构主图">
          <img :src="nurse.title" alt="" />
        </a-descriptions-item>
        <a-descriptions-item label="详情图">
          <img :src="i" alt="" v-for="(i, ii) in details" :key="ii" />
        </a-descriptions-item>
        <a-descriptions-item label="营业执照">
          <img :src="nurse.businessLicense" alt="" />
        </a-descriptions-item>
        <a-descriptions-item label="医疗许可证">
          <img :src="nurse.licenseKey" alt="" />
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card title="服务范围" style="width: 100%">
      <a-descriptions :column="2">
        <a-descriptions-item label="服务城市">{{
          nurse.serviceCity
        }}</a-descriptions-item>
        <a-descriptions-item label="服务类目">{{
          nurse.serviceCategory
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-row style="margin-top: 20px">
      <a-col :span="4" :offset="10" class="df">
        <a-button
          v-if="nurse.status != 0"
          @click="$router.go(-1)"
          class="d-a-center"
          >关闭</a-button
        >
        <a-button v-else @click="handleOpen(1)" class="d-a-center"
          >拒绝</a-button
        >
      </a-col>
      <a-col>
        <a-button
          v-if="nurse.status == 0"
          @click="handleOpen(2)"
          type="primary"
          class="d-a-center"
          >通过</a-button
        >
      </a-col>
    </a-row>
    <!-- 拒绝原因 -->
    <a-modal
      :visible="storeVisible"
      @ok="handleComplete(2)"
      @cancel="storeVisible = false"
      okText="确定"
      title="拒绝原因"
    >
      <a-form ref="storeFormRef">
        <a-form-item name="consumableLists">
          <a-input v-model:value="cancelCause" placeholder=""></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 通过 -->
    <a-modal
      :visible="rateVisible"
      @ok="handleComplete(1)"
      @cancel="rateVisible = false"
      okText="确定"
      title="佣金比例"
    >
      <a-form ref="rateFormRef">
        <a-form-item label="设置订单佣金比例：" name="consumableLists">
          <a-input
            v-model:value="priceRatio"
            placeholder="平台需扣除机构的抽成比例"
          ></a-input>
          <div style="margin-top: 16px">
            优惠金额、耗材费不计算在机构的佣金抽成之内
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import {
  reactive,
  ref,
  watch,
  computed,
  defineComponent,
  createVNode,
  toRefs,
} from "vue";
import * as api from "@/api/organ/index";
import { queryCity } from "@/api/setting/index";
import { Modal, notification, message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import { UserOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { validatorPhone } from "@/assets/js/validate";
import { throttle } from "@/assets/js/debounceThrottle";
// import {
//   updateNurse,
//   selectNurseInfo,
//   selectOrderByNurseId,
//   selectAllUrgencyLinkman,
//   selectLoginRecord,
// } from "@/api/user/index";
import axios from "axios";
import NurserOrder from "../components/NurserOrder.vue";
import { number } from "echarts";
export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const visible = ref(false);
    const formRef = ref("");
    let nurseId = ref("");

    const data = reactive({
      optionsItem: [
        { value: "母婴护理" },
        { value: "就医陪诊" },
        { value: "居家康复" },
        { value: "儿科护理" },
        { value: "中医理疗" },
        { value: "上门护理" },
        { value: "推拿按摩" },
        { value: "核酸检测" },
        { value: "检测服务" },
      ],
      details: [],
      nurse: {},
      loading: true,
      order: [],
      emergencyList: [],
      form: {},
      keyword: "",
      addressList: [],
      showDetail: false,
      number: "", //订单编号
      status: "",
      orderAct: 1, //1线上 2线下
      orderVisible: false, //线下订单
      orderDetail: {}, //线下订单详情
      consumeDetail: {}, //线下订单详情
      consumeVisible: false, //线下订单详情
      citys: [],
      logList: [],
      activeKey: "1",
      details: [],
      storeVisible: false,
      rateVisible: false,
      priceRatio: "",
      cancelCause: "",
    });
    nurseId.value = route.query.id; //护ID

    const tabs = [
      { title: "订单记录", id: 1 },
      { title: "提现记录", id: 2 },
    ];

    const rules = {
      mobile: [{ required: true, validator: validatorPhone }],
    };
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
    });
    const columnsLogin = [
      {
        title: "时间",
        dataIndex: "loginTime",
        className: "table",
        align: "center",
      },
      {
        title: "IP",
        dataIndex: "ip",
        className: "table",
        align: "center",
        sort: true,
      },
      {
        title: "地区",
        dataIndex: "address",
        className: "table",
        align: "center",
      },
      {
        title: "登录方式",
        dataIndex: "loginType",
        className: "table",
        align: "center",
      },
    ];
    const columns1 = [
      {
        title: "订单编号",
        dataIndex: "number",
        className: "table",
        align: "center",
      },
      {
        title: "用户名",
        dataIndex: "source",
        className: "table",
        align: "center",
        sort: true,
      },
      {
        title: "用户ID",
        dataIndex: "userName",
        className: "table",
        align: "center",
      },
      {
        title: "手机号",
        dataIndex: "serviceName",
        className: "table",
        align: "center",
      },
      {
        title: "订单金额",
        dataIndex: "price",
        className: "table",
        align: "center",
      },
      {
        title: "应获佣金",
        dataIndex: "realPrice",
        className: "table",
        align: "center",
      },
      {
        title: "服务名称",
        dataIndex: "status",
        className: "table",
        align: "center",
        slots: {
          customRender: "status",
        },
      },
      {
        title: "下单时间",
        dataIndex: "realPrice",
        className: "table",
        align: "center",
      },
      {
        title: "订单状态",
        dataIndex: "status",
        className: "table",
        align: "center",
        slots: {
          customRender: "status",
        },
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        align: "center",
        fixed: "right",
        slots: {
          customRender: "operation",
        },
      },
    ];
    const columns2 = [
      {
        title: "提现单号",
        dataIndex: "serverNumber",
        className: "table",
        align: "center",
      },
      {
        title: "提现金额",
        dataIndex: "name",
        className: "table",
        align: "center",
      },
      {
        title: "提现账户",
        dataIndex: "num",
        className: "table",
        align: "center",
      },
      {
        title: "提现时间",
        dataIndex: "price",
        className: "table",
        align: "center",
      },
    ];

    const selectTab = (e) => {
      console.log(e, "面板是");
      page.current = 1;
      if (e == 2) {
        initLog();
      }
    };
    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // init
    initNurseInfo();
    async function initNurseInfo() {
      let res = await api.selectOrganTempByOrganId({ organId: nurseId.value });
      if (res.success) {
        data.nurse = res.object;
        data.details = res.object.firstImg.split(",");
      }
    }

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;
      // 请求列表接口
      initLog();
    };
    const changeOrder = (id) => {
      data.orderAct = id;
      page.current = 1;
      initLog();
    };
    const checkOrganTemp = () => {
      let obj = {
        cancelCause: "",
        organId: nurseId.value,
        priceRatio: "",
        type: "", //1:同意，2，
      };
      api.checkOrganTemp(obj).then((r) => {});
    };
    const handleReject = () => {};
    const handleComplete = (v) => {
      if (v == 1) {
        if (!data.priceRatio) {
          message.warning("请输入1-100的整数");
          return;
        }
        if (!/^([1-9][0-9]{0,1}|100)$/.test(data.priceRatio)) {
          message.warning("请输入1-100的整数");
          return;
        }
      } else {
        if (!data.cancelCause) {
          message.warning("请输入原因");
          return;
        }
      }
      let obj = {
        cancelCause: data.cancelCause,
        organId: nurseId.value,
        priceRatio: data.priceRatio,
        type: v,
      };
      api
        .checkOrganTemp({
          ...obj,
        })
        .then((r) => {
          if (r.success) {
            console.log(r);
            initNurseInfo();
          }
        });
      data.priceRatio = "";
      data.cancelCause = "";
      data.storeVisible = false;
      data.rateVisible = false;
    };
    const handleOpen = (v) => {
      if (v == 1) {
        data.storeVisible = true;
      } else {
        if (data.nurse.type == 2) {
          let obj = {
            organId: nurseId.value,
            type: 1,
          };
          api
            .checkOrganTemp({
              ...obj,
            })
            .then((r) => {
              if (r.success) {
                console.log(r);
                initNurseInfo();
              }
            });
          data.priceRatio = "";
          data.cancelCause = "";
          data.storeVisible = false;
          data.rateVisible = false;
          return;
        }
        data.rateVisible = true;
      }
    };
    async function initLog() {
      let obj = {
        organId: nurseId.value,
        pageNum: page.current,
        pageSize: page.pageSize,
        type: data.orderAct,
      };
      let res = await api.organDataAnalyse(obj);
      if (res.success) {
        data.order = res.object.list;
      }
      data.loading = false;
    }

    return {
      ...toRefs(data),
      pagination,
      handleTableChange,
      columns1,
      columnsLogin,
      columns2,
      visible,
      labelCol: { style: { fontWeight: "bolder", width: "100px" } },
      formRef,
      // form,
      rules,
      value: ref([]),
      selectTab,
      tabs,
      changeOrder,
      checkOrganTemp,
      handleReject,
      handleComplete,
      handleOpen,
    };
  },
};
</script>
<style scoped>
img {
  width: 100px;
  height: 100px;
}
</style>
